<template>
    <div class="evaluate-box">
        <div class="product flex-a">
            <div><img :src="detail.goodsCoverImg" alt=""></div>
            <div>
                <div class="title">{{ detail.goodsName }}</div>
                <div class="price">￥{{ detail.sellingPrice }}</div>
            </div>
        </div>
        <div class="upload-pic">
            <div class="first">上传图片</div>
            <nut-uploader :url="uploadUrl" @success="uploadSucc" maximum="3" multiple
                list-type="picture"></nut-uploader>
        </div>
        <div class="product">
            <nut-textarea v-model="shareContent" rows="10" placeholder="请输入评价内容..." />
        </div>
        <nut-button color="#8DCF00" block @click="submit">确认</nut-button>
    </div>
</template>

<script lang="ts">
import Taro, { useRouter } from '@tarojs/taro';
import { useReachBottom } from '@tarojs/taro';
import { StarN, StarFillN } from '@nutui/icons-vue-taro';
import { reactive, toRefs, onMounted } from 'vue';
import { getDetail, insertUserShareInfo, getShareDetail } from '../../../../api/index'
import { uploadUrl } from '../../../../utils'
export default {
    components: {
        StarN,
        StarFillN
    },
    setup() {
        const data = reactive({
            shareContent: '',
            uploadUrl: uploadUrl,
            shareUrl: [],
            goodsId: '',
            orderNo: '',
            detail: {},
            user: {},
            type: '',
        });

        onMounted(() => {
            const router = useRouter();
            Taro.getStorage({
                key: 'user',
                success: function (res) {
                    data.user = res.data
                }
            })
            if (router.params.orderNo) {
                data.orderNo = router.params.orderNo
                // if (router.params.orderNo == 'detail') {
                //     getShareDetails(router.params.orderNo)
                // }
            }
            // if (router.params.type) {
            //     data.type = router.params.type
            // }
            if (router.params.goodsId) {
                data.goodsId = router.params.goodsId
                getDetail(router.params.goodsId).then(res => {
                    if (res.resultCode == 200) {
                        data.detail = res.data
                    }
                })
            }
        })
        const jumpTo = (path) => {
            Taro.navigateTo({ url: path });
        }
        useReachBottom(() => {

        })
        const uploadSucc = (val) => {
            let urls = data.shareUrl as any
            if (JSON.parse(val.data.data).code == 200) {
                urls = urls + JSON.parse(val.data.data).url + ','
                data.shareUrl = urls
            }
        }
        const submit = () => {
            let params = {
                userId: data.user.userId,
                userName: data.user.userName,
                introduceSign: data.user.introduceSign,
                goodsId: data.goodsId,
                specId: '',
                shareContent: data.shareContent,
                shareUrl: data.shareUrl.length == 0 ? '' : data.shareUrl,
                orderNo: data.orderNo
            }
            insertUserShareInfo(params).then(res => {
                if (res.resultCode == 200) {
                    Taro.showToast({
                        title: '提交成功',
                        icon: 'success',
                        duration: 2000
                    })
                    setTimeout(() => {
                        Taro.redirectTo({ url: '/packageA/pages/orderList/index?status=99' })
                    }, 500)
                }
            })
        }
        const getShareDetails = (no) => {
            getShareDetail(no).then(res => {

            })
        }
        return {
            ...toRefs(data), jumpTo, uploadSucc, submit, getShareDetails
        }
    }
};
</script>
<style lang="scss">
.evaluate-box {
    padding: 20rpx 0;

    .upload-pic {
        white-space: nowrap;
        border-radius: 20rpx;
        background: #fff;
        padding: 20rpx;
        box-sizing: border-box;
        width: 94%;
        margin: 0 auto 20rpx;
        color: #D5D5D5;
        font-size: 26rpx;

        .first {
            color: #333;
            margin-bottom: 20rpx;
        }
    }

    .product {
        border-radius: 20rpx;
        background: #fff;
        padding: 20rpx;
        box-sizing: border-box;
        width: 94%;
        margin: 0 auto 20rpx;

        img {
            width: 150rpx;
            height: 150rpx;
            border-radius: 10rpx;
            margin-right: 20rpx;
        }

        .title {
            font-size: 30rpx;
        }

        .price {
            margin-top: 60rpx;
            font-size: 28rpx;
            color: #F22F5C;
        }

        .common {
            margin-bottom: 30rpx;

            .nut-icon {
                margin-left: 20rpx;
            }
        }

        .nut-textarea {
            background: #F6F6F6;
            padding: 20rpx 0 !important;
            border-radius: 10rpx;
            min-height: 600rpx;
        }
    }

    .nut-button {
        width: 94%;
        margin: 0 auto 20rpx;
    }
}
</style>